<script setup lang="ts">
import { onMounted, reactive, ref, watch } from 'vue';
import http from '../../shared/utils/request';
import { CategoryEntity, DishEntity, SetmealEntity } from '../../shared/entity/home';
import { CategoryTypeEnum, getUri } from '../../shared';
import CommonImage from '@/components/image/index.vue'

	const activeKey = ref<number>()
	
	const categoryList = reactive<CategoryEntity[]>([])
	
	const detailCategory = reactive<(DishEntity | SetmealEntity)[]>([])
	
	// 获取分类列表
	async function getCategoryList(){
		const resp = await http.get<CategoryEntity[]>("/category/list")
		categoryList.push(...resp.data)
		activeKey.value = categoryList[0].id
	}
	
	// 根据分类type获取详情数据
	async function getCategoryItemDetail(item:CategoryEntity){
		const type = item.type
		detailCategory.length = 0
		// or detailCategory.splice(0,detailCategory.length)
		if(type === CategoryTypeEnum.Dish){
			// 获取菜品详情
			const resp = await http.get<DishEntity[]>(getUri("/dish/list",{
				categoryId:item.id
			}))
			detailCategory.push(...resp.data)
		}else if(type === CategoryTypeEnum.Setmeal){
			// 获取套餐详情
			const resp =await http.get<SetmealEntity[]>(getUri("/setmeal/list",{
				categoryId:item.id
			}));
			detailCategory.push(...resp.data)
		}
	}
	
	onMounted(()=>{
		getCategoryList()
	})
	
	watch(activeKey,(val)=>{
		const find = categoryList.find(o=>o.id === val);
		if(find){
			getCategoryItemDetail(find)
		}
	})
	
	function handlerCategoryClick(item:CategoryEntity){
		activeKey.value = item.id
	}
</script>

<template>
	<view class="content">
		<view class="nav-left">
			<scroll-view scroll-y="true" scroll-with-animation="true">
				<view v-for="item in categoryList" :key="item.id" :class="{'nav-left-item':true,'act':activeKey === item.id}" @click="handlerCategoryClick(item)">{{item.name}}</view>
			</scroll-view>
		</view>
		<view class="body">

			<template v-if="!detailCategory.length">
				<view class="empty">暂无数据</view>
			</template>
			<template v-else>
				<view class="goods-card" v-for="item in detailCategory" :key="item.id">
				  <CommonImage :src="item.image" placeholder="/static/nocccc.svg" className="goods-image"/>
				  <view class="goods-info">
				    <view class="goods-header">
				      <text class="goods-name">{{item.name}}</text>
				      <text class="goods-desc">{{item.description}}</text>
				    </view>
					<view>
						<text class="goods-sales">月销999</text>
					</view>
				    <view class="goods-footer">
						<text class="goods-price">¥{{item.price}}</text>
				      <!-- <text class="goods-price">¥{{item.price}}</text> -->
					  111
				    </view>
				  </view>
				</view>
			</template>
		</view>
	</view>
</template>

<style lang="less">
	.content{
		display: flex;
		width: 100%;
		height: calc(100vh - 400rpx);
		box-sizing: border-box;
		.nav-left{
			display: flex;
			overflow: hidden;
			background-color: #f3f4f7;
			width: 168rpx;
			padding-top: 85rpx;
			box-sizing: border-box;
			padding-bottom: 30rpx;
			position: relative;
			font-size: 26rpx;
			&-item{
				width: 100%;
				height: 100rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: center;
				&.act{
					background-color: #fff;
				}
			}
		}
		.body{
			flex: 1;
			background-color: #ffffff;
			color: #9b9b9b;
			font-family: PingFangSC, PingFangSC-Regular;
			font-weight: 400;
			font-size: 26rpx;
			display: flex;
			flex-direction: column;
			padding-top: 80rpx;
			box-sizing: border-box;
			.empty{
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 46rpx;
			}
			&-item{
				box-sizing: border-box;
				width: 100%;
				height: 180rpx;
				display: flex;
				gap: 36rpx;
				&-image{
					width: 180rpx;
					height: 180rpx;
					image{
						width: 100%;
						height: 100%;
					}
				}
			}
			.goods-card {
			  display: flex;
			  margin-bottom: 30rpx;
			  padding: 20rpx;
			  border-radius: 16rpx;
			  background-color: #fff;
			  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
			}
			
			.goods-image {
			  width: 160rpx;
			  height: 160rpx;
			  border-radius: 12rpx;
			  margin-right: 24rpx;
			}
			
			.goods-info {
			  flex: 1;
			  display: flex;
			  flex-direction: column;
			  justify-content: space-between;
			  gap: 16rpx;
			}
			
			.goods-header {
			  display: flex;
			  flex-direction: column;
			}
			
			.goods-name {
			  font-size: 32rpx;
			  font-weight: bold;
			  color: #333;
			  margin-bottom: 8rpx;
			}
			
			.goods-desc {
			  font-size: 24rpx;
			  color: #999;
			  line-height: 1.4;
			}
			
			.goods-footer {
			  display: flex;
			  justify-content: space-between;
			  align-items: center;
			}
			
			.goods-sales {
			  font-size: 24rpx;
			  color: #999;
			}
			
			.goods-price {
			  font-size: 36rpx;
			  font-weight: bold;
			  color: #ff5000;
			}
		}
	}
</style>